<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .left {
            float: left;
            width: 20%;
            height: 100%;
            background-color: cornflowerblue;
            color: white;
        }

        .left ul {
            list-style: none;
        }

        .left ul li {
            margin: 10px;
            font-size: 1.2em;
            padding-left: 1em;
        }

        .left li:hover {
            background-color: rgb(47, 115, 239);
            cursor: pointer;
        }

        .right {
            width: 80%;
            float: right;
        }

        .nav {
            overflow: hidden;
        }

        .namebtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .navright {

            position: relative;
            float: right;
        }

        .navright-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .navright-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .navright-content a:hover {
            background-color: #f1f1f1
        }

        .navright:hover .navright-content {
            display: block;
        }

        .navright:hover .namebtn {
            background-color: #3e8e41;
        }


        .table table {
            width: 100%;
            text-align: center;
        }

        .table table td button {
            color: rgb(48, 98, 206);
            margin: 3px;
            padding: 3px;
            border: 0;
            border-radius: 3px;
            cursor: pointer;
            background-color: rgba(231, 35, 35, 0.909);
        }

        .table table td button:hover {
            color: white;
        }

        .table table caption {
            font-size: 2em;
            font-weight: bolder;
        }

        .table table thead tr {
            background-color: #008c8c;
            color: #fff;
        }

        .table table tbody tr:nth-child(odd) {
            background-color: #eee;
        }

        .table table tbody tr:hover {
            background-color: #ccc;
        }

        .nextpage {
            margin: 10px;
            text-align: right;
        }

        .nextpage button {
            padding: 4px;
            background-color: rgb(48, 98, 206);
            border: 0;
            border-radius: 2px;
        }

        .nextpage button:hover {
            color: white;
            cursor: pointer;
        }

        .pagebtn {
            min-width: 2em;
        }
    </style>

</head>

<body>
    <div class="left">
        <div>
            <p style="text-align: center; font-size: 1.3em;">管理员</p>
        </div>
        <ul>
            <li id="user">用户</li>
            <li id="question">题库</li>
            <li id="inputques">录题面试题</li>
        </ul>
    </div>
    <div class="right">
        <div id="nav">
            <div class="navright">
                <button class="namebtn">{{NAME}}</button>
                <div class="navright-content">
                    <a href="#">个人信息</a>
                    <a href="#">退出登陆</a>
                </div>
            </div>
        </div>


        <div class="table">

            <table>
                <caption>用户表</caption>
                <thead>
                    <tr>
                        <th>题号</th>
                        <th>标题</th>
                        <th>难度</th>
                        <th>时间要求</th>
                        <th>空间要求</th>
                        <th>题目描述</th>
                        <th>代码</th>
                        <th>测试用例</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="questionstbody">
                </tbody>
            </table>
        </div>

        <div class="nextpage">
            <button id="lastbtn">
                上一页
            </button>

            <div></div>

            <button id="nextbtn">
                下一页
            </button>
        </div>
        <input id="number" value="" style="visibility: hidden;">
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var btns_length = 0;
        $.ajaxSetup({
            beforeSend(xhr) {
                xhr.setRequestHeader("Authorization", sessionStorage.getItem("token"))
            }
        })

        function setPageNumber() {

            if (sessionStorage.getItem("pagequenumber") == 1) {
                $("#lastbtn").css("visibility", "hidden");
            }
            else {
                $("#lastbtn").css("visibility", "visible");
            }

            if (sessionStorage.getItem("pagequenumber") == btns_length) {
                $("#nextbtn").css("visibility", "hidden");
            }
            else {
                $("#nextbtn").css("visibility", "visible");
            }
        }

        function deletebtn_click(data) {
            $.ajax({
                type: "post",
                url: "/admin_question/delete",
                data: { "deleteid": data.data.deleteid },
                success: function (res) {
                    alert("删除成功")
                    $("#question_" + data.data.deleteid).remove();
                },
                error: function () {
                    alert("删除失败")
                }
            })
        }

        function defaultRequest(pagequenumber) {
            $.ajax({
                type: "post",
                url: "/questionsinfo",
                dataType: "json",
                data: { "pagequenumber": pagequenumber },
                success: function (res) {
                    $("#questionstbody").empty();
                    for (var i = 0; i < res.questions.length; i++) {
                        var tr = $("<tr id=\"question_" + res.questions[i].number + "\"" + "></tr>");
                        tr.append("<td>" + res.questions[i].number + "</td>");
                        tr.append("<td>" + res.questions[i].title + "</td>");
                        tr.append("<td>" + res.questions[i].star + "</td>");
                        tr.append("<td>" + res.questions[i].cpu_limit + "</td>");
                        tr.append("<td>" + res.questions[i].mem_limit + "</td>");
                        tr.append("<td>" + res.questions[i].desc + "</td>");
                        tr.append("<td>" + res.questions[i].header + "</td>");
                        tr.append("<td>" + res.questions[i].tail + "</td>");
                        tr.append("<td><button type=\"button\" class=\"deletebtn\" value=\"" + res.questions[i].number + "\">删除</button></td>")
                        $("#questionstbody").append(tr);
                    }
                    var deletebtn = document.getElementsByClassName("deletebtn");
                    for (var i = 0; i < deletebtn.length; i++) {
                        $(deletebtn[i]).click({ "deleteid": deletebtn[i].value }, deletebtn_click)
                    }

                    $(".nextpage div").empty();
                    for (var i = 1; i <= res.pagesize; i++) {
                        var but = $("<button class=\"pagebtn\" id=\"pagebtn_" + i + "\" value=\" " + i + "\" onclick=defaultRequest(" + i + ")>" + i + " </button>");
                        $(".nextpage div").append(but);
                    }

                    var btns = document.getElementsByClassName("pagebtn");
                    btns_length = btns.length;

                    sessionStorage.setItem("pagequenumber", pagequenumber);
                    sessionStorage.setItem("username", res.username);
                    setPageNumber();
                }
            })
        }

        $("#lastbtn").click(function () {
            defaultRequest((parseInt(sessionStorage.getItem("pagequenumber")) - 1));
        });

        $("#nextbtn").click(function () {
            defaultRequest((parseInt(sessionStorage.getItem("pagequenumber")) + 1));
        });

        $("#question").click(function () {
            location.href = "/login/admin_questions/" + sessionStorage.getItem("username");
        })

        $("#user").click(function () {
            location.href = "/login/admin_users/" + sessionStorage.getItem("username");
        })

        $("#inputques").click(function () {
            location.href = "/login/admin_input_question/" + sessionStorage.getItem("username");
        })

        defaultRequest(sessionStorage.getItem("pagequenumber"));
        setPageNumber();
    </script>
</body>

</html>